<template>
  <div>
    <input v-model="localTitle" @input="updateTitle"/>
    <p>{{title}}</p>
  </div>
</template>
<script>
export default {
  name:'ChildSyncPage',
  props:['title'],
  data:()=>({
    localTitle:'',//当前子组件自己内部的title 
  }),
  watch:{
    title:{
      handler(title){
        this.localTitle = title;
      },
      immediate:true
    }
  },
  methods:{
    updateTitle(event){
      //获取输入框中最新的值，并且发射一个事件 update:title
      this.$emit('update:title',event.target.value);
    }
  }
}
//Avoid mutating a prop directly 
//since the value will be overwritten whenever the parent component re-renders
</script>